import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';

import { Pie } from '@antv/g2plot';
import { PieChart } from '@app/core/domain/dashboard';
import { DashboardService } from '@app/core/services/http/dashboard/dashboard.service';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzGridModule } from 'ng-zorro-antd/grid';

@Component({
  selector: 'app-public-health-chart',
  standalone: true,
  imports: [NzCardModule, NzGridModule],
  templateUrl: './public-health-chart.component.html',
  styleUrl: '../dashboard.component.less'
})
export class PublicHealthChartComponent implements AfterViewInit {
  ageData: PieChart[] = [];
  poorData: PieChart[] = [];
  dataType: number = 1;
  @ViewChild('ageChart') ageChartElement!: ElementRef<HTMLElement>;
  @ViewChild('poorChart') poorChartElement!: ElementRef<HTMLElement>;
  constructor(
    private readonly dashboardService: DashboardService,
    private readonly cdr: ChangeDetectorRef
  ) {}

  initRing(): void {
    this.initAgeMap();
    this.initPoorMap();
  }

  initAgeMap(): void {
    this.ageChartElement.nativeElement.innerHTML = '';
    const tinyArea = new Pie('ageChart', {
      appendPadding: 15,
      data: this.ageData,
      angleField: 'value',
      colorField: 'type',
      height: 150,
      color: ['rgb(108,244,252)', 'rgb(157,121,247)'],
      radius: 1,
      //innerRadius: 0.64,
      legend: {
        // offsetY: -10,
        position: 'top' // 例如将图例放置在底部
      },
      meta: {
        value: {
          formatter: v => `${v} 人`
        }
      },
      label: {
        type: 'inner',
        offset: '-50%',
        style: {
          textAlign: 'center'
        },
        autoRotate: false,
        content: '{value}'
      },
      statistic: {},
      // 添加 中心统计文本 交互
      interactions: [{ type: 'element-selected' }, { type: 'element-active' }, { type: 'pie-statistic-active' }]
    });
    tinyArea.render();
    tinyArea.chart.interval();
    window.addEventListener('resize', function () {
      tinyArea.chart.render();
    });
  }

  initPoorMap(): void {
    this.poorChartElement.nativeElement.innerHTML = '';
    const tinyArea = new Pie('poorChart', {
      appendPadding: 15,
      data: this.poorData,
      angleField: 'value',
      colorField: 'type',
      height: 150,
      color: ['rgb(2455,200,68)', 'rgb(238,123,168)'],
      radius: 1,
      //innerRadius: 0.64,
      legend: {
        // offsetY: -10,
        position: 'top' // 例如将图例放置在底部
      },
      meta: {
        value: {
          formatter: v => `${v}`
        }
      },
      label: {
        type: 'inner',
        offset: '-50%',
        style: {
          textAlign: 'center'
        },
        autoRotate: false,
        content: '{value}'
      },
      statistic: {},
      // 添加 中心统计文本 交互
      interactions: [{ type: 'element-selected' }, { type: 'element-active' }, { type: 'pie-statistic-active' }]
    });
    tinyArea.render();
    tinyArea.chart.interval();

    window.addEventListener('resize', function () {
      tinyArea.chart.render();
    });
  }

  loadChartData(): void {
    this.dashboardService.getPieChartDataByType(this.dataType).subscribe((data: PieChart[]) => {
      this.ageData = [data[0], data[1]];
      this.poorData = [data[2], data[3]];
      this.initRing();
      this.cdr.markForCheck();
    });
  }

  ngAfterViewInit(): void {
    this.loadChartData();
  }
}
